<template>
    <div>
        <!-- 面包悄导航区域 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        <el-breadcrumb>
        
        <!-- 卡片区域 -->
        <el-card>
            <el-alert type="warning" title="注意：只允许为第三级分类设置相关参数" :closable="false" show-icon></el-alert>
            <el-row class="cat_opt">
                <el-col>
                    <span>选择商品分类：</span>
                    <el-cascader expand-trigger="hover" :options="catelist" props="cateProps" v-model="selectedCateKeys" @change="handleChanged" clearable change-on-select></el-cascader>
                </el-col>
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="动态参数" name="many">
                        <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible = false">添加参数</el-button>
                        <!-- 动态参数表格 -->
                        <el-table :data="manylist" border stripe>
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-tag v-for="(item,i) in scope.row.attr_vals" closable :key="i" @close="handleClose(i,scope.row)">
                                        {{item}}
                                    </el-tag>
                                    <el-input
                                        class="input-new-tag"
                                        v-if="scope.row.inputVisible"
                                        v-model="scope.row.inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm(scope.row)"
                                        @blur="handleInputConfirm(scope.row)"
                                        >
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>


                                </template>
                            </el-table-column>
                            <el-table-column type="index"></el-table-column>
                            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                                    <el-button type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
                                <template>
                            </el-table-column>
                        </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                        <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible = false">添加属性</el-button>
                        <!-- 静态属性表格 -->
                        <el-table :data="onlylist" border stripe>
                            
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-tag v-for="(item,i) in scope.row.attr_vals" closable :key="i" @close="handleClose(i,scope.row)">
                                        {{item}}
                                    </el-tag>
                                    <el-input
                                        class="input-new-tag"
                                        v-if="scope.row.inputVisible"
                                        v-model="scope.row.inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm(scope.row)"
                                        @blur="handleInputConfirm(scope.row)"
                                        >
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column type="index"></el-table-column>
                            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                                    <el-button type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
                                <template>
                            </el-table-column>
                        </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!-- 添加参数对话框 -->
        <el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
                <el-from-item :label="titleText" prop="attr_name">
                    <el-input v-mode="addForm.attr_name"></el-input>
                </el-from-item>
            </el-form>
            <span>
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addParams">确定</el-button>
            </span>
        </el-dialog>

        <!-- 修改参数对话框 -->
        <el-dialog :title="'修改'+titleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
                <el-from-item :label="titleText" prop="attr_name">
                    <el-input v-mode="editForm.attr_name"></el-input>
                </el-from-item>
            </el-form>
            <span>
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editParams">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            catelist:[],
            cateProps:{
                value:'cat_id',
                label:'cat_name',
                children:children
            },
            selectedCateKeys:[],
            activeName:'many',
            manylist:[],
            onlylist:[],
            addDialogVisible:false,
            addForm:{
                attr_name:''
            },

            addFormRules:{

            },
            editDialogVisible:false,
            editForm:{
                attr_name:''
            },
            editFormRules:{

            }
        }
    },
    created(){
        this.getCateList();
    },
    methods:{
        //获取所有商品分类列表
        async getCateList(){
            const {data:res} = await this.$http.get('categories');
            if(res.meta.code != '200'){
                return this.$message.error('获取商品分类失败')
            }
            this.catelist = res.data;
            console.log(res.data);
        },
        //级联选择框选中项变化，会触发
        handleChanged(){
            this.getParamsData();
        },
        async getParamsData(){
            if(this.selectedCateKeys.length != 3){
                this.selectedCateKeys = []
                this.manylist = []
                this.onlylist = []
                return
            }
            //根据所选分类id获取对应的数据
            const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}})
            if(res.meta.code != '200'){
                return this.$message.error('获取参数列表失败')
            }
            res.data.forEach(item=>{
                item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
                //控制文本框的显示 与隐藏
                item.inputVisible = false;
                item.inputValue = ''
            })
            if(this.activeName === 'many'){
                this.manylist = res.data
            }else{
                this.onlylist = res.data
            }
        },
        handleTabClick(){
            this.getParamsData();
        },
        //监听添加对话框的关闭事件
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },

        editDialogClosed(){
            this.$refs.editFormRef.resetFields();
        },
        addParams(){
            this.$ref.addFormRef.validate(async valid=>{
                if(!valid) return
                const {data:res}= await this.$http.post(`categories/${cateId}/attributes`,{
                    attr_name:this.addForm.attr_name,
                    attr_sel:this.activeName
                })
                if(res.meta.code != '201'){
                    return this.$message.error('失败')
                }
                this.$message.success('成功')
                this.addDialogVisible = false;
                this.getParamsData();
            })
        },
        async showEditDialog(attrId){
            const {data:res} = await this.$http.get(`categories/${cateId}/attributes/${attrId}`)
            if(res.meta.code != '200'){
                return this.$message.error('失败')
            }
            this.editForm = res.data;
            this.editDialogVisible = true;
        },
        editParams(){
            this.$ref.editFormRef.validate(async valid=>{
                if(!valid) return
                const {data:res}= await this.$http.put(`categories/${cateId}/attributes/${this.editForm.attr_id}`,{
                    attr_name:this.editForm.attr_name,
                    attr_sel:this.activeName
                })
                if(res.meta.code != '201'){
                    return this.$message.error('失败')
                }
                this.$message.success('成功')
                this.editDialogVisible = false;
                this.getParamsData();
            })
        },
        //删除参数
        async removeParams(attrId){
            const confirmResult = await this.$confirm('此操作将永久删除该参数，是否继续？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).catch(err=> err)
            if(confirmResult != 'confirm'){
                return this.$message.error('已取消删除')
            }
            //删除的业务逻辑
            const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attrId}`)
            if(res.meta.status != 200){
                    return this.$message.error('失败')
            }
            this.$message.success('删除参数成功')
        },
        //文本框失去焦点
        async handleInputConfirm(row){
            if(row.inputValue.trim().length === 0){
                row.inputValue = ''
                row.inputVisible = false;
                return
            }
            this.saveAttributs(row)
        },
        async saveAttributs(row){
            //后续处理
            row.attr_vals.push(row.inputValue.trim());
            row.inputValue = '';
            row.inputVisible = false;

            const {data:res} = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
                attr_name:row.attr_name,
                attr_sel:row.sel,
                attr_vals:row.attr_vals.join(' ')
            })
            if(res.meta.status != 200){
                    return this.$message.error('失败')
            }
            this.$message.success('参数修改成功')
        },
        showInput(row){
            row.inputVisible = true;
            // 让文本框自动获得焦点
            // nextTick方法的作用 就是当页面上元素被重新渲染之后，才会指定回调函数中的代码

            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        //删除参数可选项
        handleClose(i,row){
            row.attr_vals.splice(i,1);
            this.saveAttributs(row)
        }
    },
    computed:{
        //如果 按钮需要被禁用
        isBtnDisabled(){
            return this.selectedCateKeys.length == 3
        },
        cateId(){
            if(this.selectedCateKeys.length === 3){
                return this.selectedCateKeys[2]
            }
            return null;
        },
        titleText(){
            if(this.activeName == 'many'){
                return '动态参数'
            }
            return "静态属性"
        }
    }
}
</script>

<style lang="less" scoped>
.cat_opt{
    margin:15px 0;
}
.el-tag{
    margin:10px
}
.input-new-tag{
    width: 120px;
}
</style>